<template>
   <div class="root">
        <div class="search">
        <div @click="backhander"><img src="../../public/ykf-img/back.png" alt=""></div>
        <div class="search-input" >
            <span class="yo-ico font">&#xe64b;</span>
            <input type="text" :placeholder="placehold" @keyup.enter="keyuphander" v-model="value">
        </div>
        <div @click="backhander" ><span>取消</span></div>
        
        </div>

        <div class="history" v-show='!clearhistory'>
            <h3>
                <span>历史记录</span>
                <span class="yo-ico"
                        @click="clear">&#xe682;</span>
            </h3>
            <div class="todolist">
                <ul>
                    <li v-for="li,index in todo" 
                        :key="index">
                        {{li}}
                    </li>
          
                </ul>
            </div>
        </div>

        <div class="find">
                <h3>
                    搜索发现
                </h3>
                <ul>
                    <li>dsajjd xxxxxxxxxx</li>
                    <li>dsajjd xxxxxxxxxx</li>
                    <li>dsajjd xxxxxxxxxx</li>
                    <li>dsajjd xxxxxxxxxx</li>
                </ul>
        </div>

        <div class="classify">
            <h3>
                常用分类
            </h3>
            <ul>
                <li>
                    <div>
                        <img src="../../public/ykf-img/x2.png" alt="">
                    </div>
                    <span>口红</span>
                </li>
                  <li>
                    <div>
                        <img src="../../public/ykf-img/x2.png" alt="">
                    </div>
                    <span>口红</span>
                </li>
                  <li>
                    <div>
                        <img src="../../public/ykf-img/x2.png" alt="">
                    </div>
                    <span>口红</span>
                </li>
                  <li>
                    <div>
                        <img src="../../public/ykf-img/x2.png" alt="">
                    </div>
                    <span>口红</span>
                </li>
                  <li>
                    <div>
                        <img src="../../public/ykf-img/x2.png" alt="">
                    </div>
                    <span>口红</span>
                </li>
            </ul>
        </div>
   </div>
</template>

<script>
    import Header from './header'

    export default {
        data(){
            return {
                clearhistory:true,

                placehold:'防晒囤货季',
                todo:[],
                value:''
            }
        },
            components:{
                Header
            },
            methods:{
                backhander(){
                    this.$router.back()
                },
                keyuphander(){
                      if(this.value.length>10)
                    {
                        this.value=''
                    }
                    if(this.value.length===0)return
                  
                    this.todo.push(this.value)
                      if(this.todo.length>10){
                        this.todo.shift()
                    }
                    this.value=''
                    this.clearhistory=false
                  
                },
                clear(){
                    this.clearhistory=true
                    this.todo.length=0
                }
            }
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/border.styl';
    .root
        display flex 
        flex-direction column
        
    .search 
        flex 1
        height .47rem
        display flex 
        justify-content space-between
        line-height .44rem
        border_1px(0 0 1px 0,#ccc)
        padding-right .12rem
        div:first-child
            padding-left .1rem
            
            vertical-align middle

        &:last-child
                padding-right .1rem
                color #ccc
                cursor pointer
                font-size .14rem
                vertical-align middle
        .search-input
            width 80%
            border .01rem solid rgb(102, 110, 232)
            border-radius .24rem
            height .25rem
            margin-top .1rem
            padding-left .1rem
          
        input 
            vertical-align top
            height .23rem
            width 2.11rem
            outline none
            line-height 100%
            font-size .13rem
            color #666
            text-indent .1rem
            border 0

.font
    color rgb(102, 110, 232)
    cursor pointer
    display inline-block
    // height .25rem
    margin-top -.20rem
.history
    // height 1.42rem
    padding .16rem .17rem
    border_1px(0 0 .18rem 0,#CCC) 

    h3
        display flex
        justify-content space-between
        margin-bottom .15rem
        span:first-child
            font-size .17rem
            font-weight normal
    .todolist
        ul
            display flex 
            justify-content around 
            flex-wrap wrap
            li
                padding 0 .12rem
                color #333
                font-size .12rem
                display inline-block
                background-color  rgba(242, 242, 242, 1)
                height .24rem
                border-radius .12rem
                line-height .24rem
                margin-right .12rem
                margin-bottom .12rem
.find
    min-height 1.23rem
    border_1px(0 0 .18rem 0,#CCC) 
    padding .20rem .17rem             
    h3
        display flex
        justify-content space-between
        margin-bottom .16rem
        font-size .17rem
        font-weight normal
    ul 
        display flex 
        flex-wrap wrap 
        justify-content space-between
        li
            margin-bottom .1rem
            line-height 1
        // padding-bottom .15rem  
.classify
    padding .20rem .17rem
    h3
        display flex
        justify-content space-between
        margin-bottom .16rem
        font-size .17rem
        font-weight normal
    ul 
        display flex 
        flex-wrap wrap
        justify-content space-between
        li
            width 25%
            padding 0 .1rem
            height .9rem
            display flex
            flex-direction column
            text-align center
            margin-bottom .1rem
            div 
                width .6rem
                height .6rem
                background-color pink
                border-radius .3rem
                margin-bottom .12rem
                line-height .57rem
            span 
                color #333
.classify
    ul 
        li
            img 
                width .16rem
</style>